<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section>
        <q-item-label class="text-h6">参与投标</q-item-label>
      </q-card-section>
      <q-card-section>
        <q-item-label class="text-subtitle1">
          本次消耗：
          <span class="text-h6 text-warning">{{ data.consume || "0.00" }}</span>
        </q-item-label>
        <q-separator spaced="" />
        <div v-html="data.message"></div>
      </q-card-section>
      <card-footer-buttons
        :ok="data.btnText"
        @ok="onOKClick"
        @cancel="onCancelClick"
      ></card-footer-buttons>
    </q-card>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent } from "quasar";
import { fetchConsumeDetail } from "src/assets/fetch";
import { useStore } from "vuex";
import { computed, reactive } from "vue";
import CardFooterButtons from "../CardFooterButtons.vue";

export default {
  components: { CardFooterButtons },
  emits: [...useDialogPluginComponent.emits],
  props: {
    consume: String,
    message: String,
    demandId: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
      useDialogPluginComponent();
    const $store = useStore();
    const data = reactive({
      message: props.message,
      consume: props.consume,
      result: null,
      btnText: computed(() => {
        if (data.result) {
          if (3 === data.result.bidType) {
            switch (data.result.type) {
              case 1:
                return "确认使用";
              case 2:
                return "购买并兑换";
              case 3:
                return "兑换并使用";
              default:
                return false;
            }
          }
          return "确定使用";
        }
        return false;
      }),
    });
    if (!data.consume || !data.message) {
      fetchConsumeDetail(
        props.demandId,
        $store.getters["common/currentCookie"]
      ).then((res) => {
        data.result = res.data;
        data.message = res.data.message;
        data.consume = res.data.consume;
      });
    }

    return {
      data,
      dialogRef,
      onDialogHide,
      onOKClick() {
        switch (data.result.type) {
          case 1:
            return onDialogOK(data.result);
          case 2:
          // "购买并兑换"
          case 3:
          // "兑换并使用"
        }
        onDialogCancel();
      },
      onCancelClick: onDialogCancel,
    };
  },
};
</script>
